<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>JQuery事件源【4类 15种】</title>
		
		<!-- 事件源：针对元素触发效果
		 一、鼠标事件【5种 前期必须掌握】*
		1 click():当元素被单机时候触发
		2 dblclick():当元素被双击时候触发
		3 mouseenter():当鼠标指针移入元素区域时触发，触发效率低【tap选项卡、左栏】
		4 mouseleave():当鼠标指针移出元素区域时触发，触发效率低【tap选项卡、左栏】
		5 mousemove():当鼠标指针在元素内移动时出发的效果，触发效率高【绘画 获取坐标】
				 二、键盘事件【3种  页面小游戏】
				 三、表单事件【4种 后台和前台交互】 form元素 input元素 
				 1 focus()：针对input元素，当元素获取焦点时触发
				 2 blur（：针对input元素，当元素失去焦点时候触发
				 四、文档/窗口事件【3种 页面、页面加载】 吸顶灯效果
				 -->
				 <script src="js/jquery-1.11.1.js"></script>
				 <style>
					 div {
						 width: 200px;
						 height: 200px;
						 text-align: center;
						 line-height: 200px;
						 border-top:50px solid #00ff00 ;
						 border-right:50px solid #00ffff ;
						 border-bottom:50px solid #ffaaff ;
						 border-left:50px solid #ffff00 ;
					 }
				 </style>
			</head>
			<body>
				<h1>鼠标触发事件</h1>
				<button class="btn1">鼠标单击</button>
				<button id="btn2">鼠标双击</button>
				<!-- css:200*200 文字垂直居中显示 外边框50px  并且四个边颜色不同-->
				<div><span>鼠标移入和移出</span></div>
				<h1>表单触发事件</h1>
				<input type="text" />
				<script>
					/* 不用元素选择器、类选择器、id选择器。抓到innput元素
					 JQ工厂函数抓取元素：通过属性和属性值
					 
					 */
					/* $("input[type='text']").focus(function(){
						alert("获取input焦点");
					}); */
					$("input[type='text']").blur(function(){
						alert("失去input焦点");
					});
					
					
					
					
					/*1.鼠标单击*/
					/* $('.btn1').click(function(){
						document.write("<marquee>跑马灯......</marquee>");
					}); */
					/* 2.鼠标双击 */
					/* $('#btn2').dblclick(function(){
						alert("我被双击啦~");
					}); */
					/*3.鼠标移入*/
					/* $('div').mouseenter(function(){
						alert("鼠标移入了");
					}); */
					/*4.鼠标移出*/
					/* $('div span').mouseleave(function(){
						document.write("<h1>鼠标移出啦</h1>");
					}); */
					/* 5.鼠标跟随 移动鼠标选区位置：绘画，页面位置 X值  Y值 */
				      $('div').mousemove(function(e){
				      	alert("div区域X值:"+e.pageX+"div区域Y值:"+e.pageY);
				      }); 
				</script>
			</body>
		</html>